<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>easyDanmaku.js demo</title>
    <style >
        header{
            padding:30px 0;
            text-align: center;
        }
        .main-container{
            width:100%;
            max-width:980px;
            height:auto;
            margin:0 auto;
        }
        .danmaku-container{
            width:100%;
            height:400px;
        }
        .danmaku-wrapper{
            /* background: linear-gradient(to right,gray 60% , transparent);
            border-top-left-radius: 50%;
            border-bottom-left-radius: 50%; */
            /* background: #eee; */
            height:30px;
            line-height: 30px!important;
        }
        .centered-wrapper{
            width:100px;
            height:30px;
            background:black;
            color:wheat;
            text-align: center;
            line-height: 30px;
            padding:0 10px;
        }

        .danmaku-controller{
            display: flex;
            align-items: center;
        }
        .danmaku-controller>input{
            width:80%;
            height:30px;
        }
        .danmaku-controller>button{
            width:20%;
            height:35px;
            margin-left:20px;
        }
        .center-style{
            /* background: black; */
            color:black!important;
        }

        .has-avatar{
            height:40px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .has-avatar>img{
            width:30px;
            height:30px;
            margin-right:10px;
            clip-path:circle(50% at 50% 50%)
        }
    </style>
</head>
<body>
    <div class="main-container">
        <header>
            <h3>
                EasyDanmaku.js 弹幕插件Demo
            </h3>
        </header>
        <fieldset style="margin-top:30px;">
            
            <div class="danmaku-container" id="container2"></div>
            <legend>批量插入弹幕 | 单条插入弹幕</legend>
            <div class="danmaku-controller">
                <input id="content" placeholder="输入单条弹幕内容" value="今天天气真不错！" type="text">
                <button id="send-btn">发送</button>
                <button data-state='1' id="control">暂停</button>
            </div>
        </fieldset>
        
    </div>
</body>

<script type="module">
"use strict"
import EasyDanmaku from './easyDanmaku.js'

   
    /* ----- 循环播放 end ------  */

    /* ----- 单条弹幕插入 start ------  */
    const sendBtn0 = document.querySelector('#send-btn0');
    const input0 = document.querySelector('#content0');

  
    
    /* ----- 单条弹幕插入 end ------  */





    // ---------------------------------------------------------------------------- //






    /* ----- 批量插入弹幕 start ------  */
    const Danmaku2 = new EasyDanmaku({
        el:'#container2',
        colourful:true,
        line:10,
        wrapperStyle:'danmaku-wrapper',
        speed:8,
        hover:true,
        onComplete:function(){
            console.log('单次弹幕插入完毕');
            send();
        },
        onHover:function(e){
            console.log(e);
        }
    })
    function send(){
        const data = ['danmaku1','danmaku2','danmaku3','danmaku4','danmaku5','danmaku6','danmaku1','danmaku2','danmaku3','danmaku4','danmaku5','danmaku6'];
        Danmaku2.batchSend(data);
    }
    send();
    /* ----- 批量插入弹幕 end ------  */


    /* ----- 单条弹幕插入 start ------  */

    const sendBtn = document.querySelector('#send-btn');
    const input = document.querySelector('#content');

    sendBtn.onclick = () => {
        Danmaku2.send(input.value,'danmaku-wrapper',function(){
        // 弹幕需要带参数可使用html标签包裹
        // Danmaku2.send("<span data-id='234kl23jl'>"+ input.value +"</span>",'danmaku-wrapper',function(){
            console.log('发送成功');
        })
    }
    /* ----- 单条弹幕插入 end ------  */


    /* ------- 全局暂停 start ---------*/
    
    const state = {
        pause:0,//暂停
        play:1, //播放
    }
    const controlBtn = document.querySelector('#control');

    controlBtn.onclick = function(){
        if(this.dataset.state == state.play){
            this.dataset.state = state.pause;
            this.innerHTML = '播放';
            Danmaku2.pause();
        }else{
            this.dataset.state = state.play;
            this.innerHTML = '暂停';
            Danmaku2.play();
        }
    }
    /* ------- 全局暂停 end ---------*/
        
</script>
</html>